<!DOCTYPE html>
<html>
<head>
	<title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
    </script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	    <!-- our own navbar goes here -->
		<nav id="navbarPlaceholder"></nav>

		<!-- the body of your page goes here -->
		<!-- stuff -->
	
		<!-- our own footer goes here-->
		

	<h1>闹钟</h1>
	<form>
		<label for="hour">小时：</label>
		<input type="number" id="hour" min="0" max="23">
		<label for="minute">分钟：</label>
		<input type="number" id="minute" min="0" max="59">
		<label for="second">秒数：</label>
		<input type="number" id="second" min="0" max="59">
		<button type="button" onclick="setAlarm()">设置闹钟</button>
	</form>

	
	<script>
		function setAlarm() {
			let hour = document.getElementById("hour").value;
			let minute = document.getElementById("minute").value;
			let second = document.getElementById("second").value;
			let alarmTime = new Date();
			alarmTime.setHours(hour, minute, second, 0);
			let alarmTimestamp = alarmTime.getTime();
			setInterval(function() {
				let now = new Date().getTime();
				if (now >= alarmTimestamp) {
					alert("时间到了！");
					clearInterval();
				}
			}, 1000);
		}


	</script>
    <div class="container">
        <div class="overlay"></div>
        <img src="images/1.jpg" alt="Image">
      </div>

	  
	  <nav id="footerPlaceholder"></nav>
	  <script src="./scripts/skeleton.js">

	  </script>

</body>
</html>